<template>
    <div> 
        <el-icon color="#606266">
            <i class="iconfont icon-quanping" @click="screenfullClick"></i>
        </el-icon>
    </div>
</template>

<script lang="ts" setup>
import screenfull from 'screenfull'
import { ref, onMounted, onUnmounted } from 'vue'
const isFullscreen = ref(false)
onMounted(() => {
    window.addEventListener('resize', currentScreen)
})

onUnmounted(() => {
    window.removeEventListener('resize', currentScreen)
})

// 浏览器改变触发
const currentScreen = () => {
    if (screenfull.isFullscreen !== isFullscreen.value) isFullscreen.value = screenfull.isFullscreen
}
//  点击切换全屏
const screenfullClick = () => {
    if (screenfull.isEnabled) screenfull.toggle()
}
</script>
